<script setup>
/**
 * & 文件引入区域
 */
import { onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";

import { itemStore } from "@/stores/item";
import { useUseStore } from "@/stores/user";

import { langList } from "@/data/langList";
import { countryList } from "@/data/countryList";

import { OpenChildrenPage } from "@/hook/routerHandle";
import { ToastFun } from "@/hook/toast";

import {
  getCountryList,
  getThirdDistrictList,
  getSecondDistrictList,
  getFourthDistrictList,
  getHotelCountByRegion
} from "@/server/api/BuyerData";

/**
 * & 注册区
 */

const { t } = useI18n();
const props = defineProps(["type", "isScaner", "regionChange"]);
const emit = defineEmits([
  "itemDataChangeFun",
  "shopDataChangeFun",
  "sendRegionId"
]);

/**
 * & 变量声明区
 */
const { locale } = useI18n();
let changeView = reactive({
  isLang: false, // 控制语言设置面板的显示隐藏
  isCountry: false, // 控制国家设置面板的显示隐藏
  isProvince: false, // 控制省份设置面板的显示隐藏
  isCity: false, // 控制城市设置面板的显示隐藏
  isRegion: false, // 控制区县设置面板的显示隐藏
});

let showBottom = ref(false); // 控制弹出层样式

let secDisList = ref(); // 二级行政区数据列表
let thdDisList = ref(); // 三级行政区数据列表
let fthDisList = ref(); // 四级行政区数据列表

let FirstHotelCountMap = ref();
let secondHotelCountMap = ref();
let thirdHotelCountMap = ref();
let langCon = ref(null); // 控制选中的语言样式
let countryCon = ref(null); // 控制选中的国家样式
let provinceCon = ref(null); // 控制选中的省份样式
let cityCon = ref(null); // 控制选中的城市样式
let regionCon = ref(null); // 控制选中的区县样式

let countryImg = ref(""); // 显示的国旗

/**
 * & 函数区
 */
// 切换设置面板方法
const changeViewFun = (type) => {
  // 显示弹出层
  showBottom.value = true;

  // 通过遍历将所有的面板隐藏后，再将传入的type对应的面板显示
  for (const key in changeView) changeView[key] = false;
  changeView[type] = true;
};
const updateFirstHotelCount = (region) => {
  FirstHotelCountMap = region;
};
const updateSecondHotelCount = (region) => {
  secondHotelCountMap = region;
};
const updateThirdHotelCount = (region) => {
  thirdHotelCountMap = region;
};
// 修改国家地区分类
const changeItemAddFun = async (id, img) => {
  // 修改国家地区代码
  // useUseStore().countryCode = id;

  // 切换国旗
  countryImg.value = img;

  // 判断是否在shop页面，从而请求二级三级行政区
  if (true) {
    // 获取对应的二级行政区数据
    getSecDisListFun(id);

    regionCon.value = null;
  }

  // 避免重复点击发起请求
  if (countryCon.value != id) {
    countryCon.value = id;
    ToastFun("Loading", { msg: "✋🏻..." });
    emit("itemDataChangeFun", id);

    // 弹出层隐藏
    showBottom.value = false;
  }
};

// 获取二级行政区域列表
const getSecDisListFun = async (id) => {
  ToastFun("Loading", { msg: "✋🏻..." });

  let { data } = await getSecondDistrictList(id);

  if (data.code == 200) {
    try {
      const response = await getHotelCountByRegion(data.data);
      console.log(response.data.data);
      updateFirstHotelCount(response.data.data);
      // 更新酒店数量
      // console.log(111, hotelCountMap["CN001"]);
    } catch (error) {
      console.error('获取酒店数量失败', error);
    }
    secDisList.value = data.data;
    console.log("获取二级行政区域列表", secDisList.value);

    // 显示省份设置面板
    changeViewFun("isProvince");
  } else {
    ToastFun("show", { msg: t("tellUs") });
    showBottom.value = false;
  }
};

// 获取三级行政区域列表
const getThdDisListFun = async (id) => {
  provinceCon.value = id;
  console.log("区号1:", id);
  emit('sendRegionId', id);
  ToastFun("Loading", { msg: "✋🏻..." });

  let { data } = await getThirdDistrictList(id); // 请求接口

  if (data.code == 200 && data.data != null) {
    // 显示省份设置面板
    try {
      const response = await getHotelCountByRegion(data.data);
      console.log(response.data.data);
      updateSecondHotelCount(response.data.data);
      // 更新酒店数量
      console.log(111, secondHotelCountMap);
    } catch (error) {
      console.error('获取酒店数量失败', error);
    }
    changeViewFun("isCity");
    thdDisList.value = data.data;
    console.log("获取三级行政区域列表", thdDisList.value);

  } else {
    ToastFun("", { msg: t("tellUs") })
    showBottom.value = false;
  }
};

// 获取四级行政区域列表
const getFthDisListFun = async (id) => {
  cityCon.value = id;
  ToastFun("Loading", { msg: "✋🏻..." });
  let { data } = await getFourthDistrictList(id); // 请求接口

  if (data.code == 200 && data.data != null) {
    try {
      const response = await getHotelCountByRegion(data.data);
      console.log(response.data.data);
      updateThirdHotelCount(response.data.data);
      // 更新酒店数量
      // console.log(111, hotelCountMap["CN001"]);
    } catch (error) {
      console.error('获取酒店数量失败', error);
    }
    // 显示省份设置面板
    changeViewFun("isRegion");
    fthDisList.value = data.data;
    console.log("获取四级行政区域列表", fthDisList.value);
  } else {
    ToastFun("", { msg: t("tellUs") })
    showBottom.value = false;
  }
};

// 修改实体店地区方法
const changeShopAddFun = (id) => {
  console.log(countryCon.value, id);
  console.log("区号：", id);
  emit('sendRegionId', id)
  if (countryCon.value == "CN" && regionCon.value == null) {
    regionCon.value = id;
    getFthDisListFun(id);
  }
  // 避免重复发起请求
  else {
    cityCon.value = id;
    useUseStore().regionId = id;
    emit("shopDataChangeFun", id);
    showBottom.value = false;
  }
};

onMounted(() => {
  countryCon.value = useUseStore().countryCode;
  // console.log("国家代码", useUseStore().countryCode);

  countryList.findIndex((item) => {
    if (useUseStore().countryCode == item.countryCode)
      countryImg.value = item.img;
  });

  // 获取默认语言下标
  let index = itemStore().langIndex;

  // 判断是否有选中语言的下标记录
  if (index == null) {
    index = langList.value.findIndex((item) => item.lang == locale.value);
  }

  langCon.value = index;
});
</script>

<template>
  <!-- 
    @searchFun：用于获取搜索框的内容
    isScaner: 是否显示扫描二维码
    type：样式类型
   -->
  <div class="topBarCom">
    <div class="topBar">
      <img :src="`/images/countryImg/${countryImg ? countryImg : 'China.png'}`" @click="changeViewFun('isCountry')"
        class="country" />
      <img src="/images/Home/路径.png" alt="">
    </div>

    <!-- 语言和国家设置面板 -->
    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '92%' }" class="popup">
      <!-- 关闭弹窗按钮 -->
      <div class="btn">
        <img @click="showBottom = false" src="/images/Home/语言切换面板按钮.png" alt="" />
      </div>
      <div class="setUpView country" v-if="changeView.isCountry">
        <!-- <div class="select">
                        <span>智能识别国家</span>
                        <span class="selected">加拿大</span>
                </div> -->
        <div class="content">
          <div :class="['item', countryCon == item.countryCode ? 'con' : '']"
            @click="changeItemAddFun(item.countryCode, item.img)" v-for="(item, i) in countryList" :key="i">
            <span>{{ item.countryEName }}</span>
            <img :src="`/images/countryImg/${item.img}`" alt="" />
          </div>
        </div>
      </div>

      <div class="setUpView province" v-if="changeView.isProvince">
        <div class="content">
          <div :class="['item', provinceCon == item.countryId ? 'con' : '']" @click="getThdDisListFun(item.countryId)"
            v-for="(item, i) in secDisList" :key="i">
            <span>{{ item.name }}</span>
            <span :class="['hotel-count', FirstHotelCountMap[item.countryId] > 0 ? 'has-count' : '']">{{
              FirstHotelCountMap[item.countryId] }} {{ $t("shopFirCate.Hotel") }}</span>
          </div>
        </div>
      </div>

      <div class="setUpView city" v-if="changeView.isCity">
        <div class="content">
          <div :class="['item', cityCon == item.countryId ? 'con' : '']" @click="changeShopAddFun(item.countryId)"
            v-for="(item, i) in thdDisList" :key="i">
            <span>{{ item.name }}</span>
            <span :class="['hotel-count', secondHotelCountMap[item.countryId] > 0 ? 'has-count' : '']">{{
              secondHotelCountMap[item.countryId] }} {{ $t("shopFirCate.Hotel") }}</span>
          </div>
        </div>
      </div>

      <div class="setUpView region" v-if="changeView.isRegion">
        <div class="content">
          <div :class="['item', cityCon == item.countryId ? 'con' : '']" @click="changeShopAddFun(item.countryId)"
            v-for="(item, i) in fthDisList" :key="i">
            <span>{{ item.name }}</span>
            <span :class="['hotel-count', thirdHotelCountMap[item.countryId] > 0 ? 'has-count' : '']">
              {{ thirdHotelCountMap[item.countryId] }}
              {{ $t("shopFirCate.Hotel") }}
            </span>
          </div>
        </div>
      </div>

    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
/* .hotel-count 基本样式 */
.hotel-count {
  font-size: 12px;
  /* 字体大小 */
  color: #ffffff;
  /* 字体颜色为白色 */
  background-color: rgba(0, 0, 0, 0.6);
  /* 半透明的背景颜色 */
  padding: 4px 10px;
  /* 内边距，保证文字不紧贴边框 */
  border-radius: 12px;
  /* 圆角边框 */
  display: inline-block;
  /* 行内块级元素 */
  margin-left: 8px;
  /* 左侧间距，避免与文字紧挨 */
  font-weight: bold;
  /* 加粗字体 */
  max-width: 100px;
  /* 限制最大宽度，防止文字溢出 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  overflow: hidden;
  /* 隐藏溢出部分 */
  white-space: nowrap;
  /* 防止换行 */
}

/* .has-count 样式，只有当数量大于 0 时才会应用 */
.has-count {
  background-color: #007bff;
  /* 背景色变为蓝色 */
}

/* 响应式优化，手机端的样式 */
@media (max-width: 767px) {
  .hotel-count {
    font-size: 10px;
    /* 手机端适当调整字体大小 */
    padding: 3px 8px;
    /* 调整内边距 */
    max-width: 90px;
    /* 限制最大宽度 */
  }
}

/* 鼠标悬停时的样式 */
.hotel-count:hover {
  background-color: rgba(0, 0, 0, 0.8);
  /* 背景变深 */
  cursor: pointer;
  /* 鼠标变成手型 */
}

.has-count:hover {
  background-color: #0056b3;
  /* 背景色变为深蓝 */
}

.topBarCom {

  .topBar {
    padding: 20rem 16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >.country {
      width: 34rem;
      margin-right: 10rem;
    }
  }

  :deep(.popup) {

    border-radius: 12rem 12rem 0rem 0rem;
    overflow-y: scroll;
    background: #f5f5f5;

    &::-webkit-scrollbar {
      display: none;
    }

    .btn {
      display: flex;
      justify-content: center;
      padding: 16rem 0 28rem;
      background: #f5f5f5;

      position: sticky;
      top: 0;
      z-index: 10;

      >img {
        width: 37rem;
        height: 8rem;
      }
    }

    .setUpView {
      z-index: 10;
      width: 100%;

      .select {
        padding: 12rem 0 12rem 12rem;
        background: #fff;

        display: flex;
        align-items: center;

        span {
          font-size: 14rem;
          line-height: 20rem;
          font-weight: 500;

          &.selected {
            font-size: 12rem;
            font-weight: 400;
            line-height: 16rem;
            margin-left: 12rem;
          }
        }
      }

      .content {
        font-size: 14rem;

        >.item {
          padding: 12rem;
          background: #fff;

          display: flex;
          align-items: center;
          justify-content: space-between;

          >img {
            width: 35rem;
          }

          &.con {
            background: #fbfbfb;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
